import React, {FC, useContext, useState} from 'react';
import "./JournalIntroduction.less";
import JournalDefaultLayout from "@/pages/JournalPage/JournalDetail/commons/JournalDefaultLayout";
import classNames from "classnames";
import {HxConfigContext} from "@/layouts/HxConfigContext";
import {JournalDetailContext} from "@/pages/JournalPage/JournalDetail/commons/JournalDetailContext";
import {correspVal} from "@/utils/biz";
import HxKwNavs from "@/components/HxKwNavs";
import {FormattedMessage} from "@@/exports";

interface JournalIntroductionProps {
}

const JournalIntroduction: FC<JournalIntroductionProps> = (props) => {
  const [navActive, setNavActive] = useState<string>("intro")
  const {isZhCN} = useContext(HxConfigContext)
  const {journal} = useContext(JournalDetailContext)

  const isCn = journal?.languageType === "CN";

  const journalIntroElement = (
    <div className={"journal-intro"}
         dangerouslySetInnerHTML={{__html: correspVal(isZhCN, journal?.journalIntroductionCn, journal?.journalIntroductionEn)!}}/>
  )
  return (
    <JournalDefaultLayout includeHotArticles={isCn} includeNews={isCn}>
      <div className={"journal-introduction-container"}>
        {
          isCn ? (
            <HxKwNavs className={"journal-introduction-kw-navs"} value={navActive} onChange={(value) => setNavActive(value)} items={[
              {key: "intro", label: <FormattedMessage id="journal.intro"/>},
              {key: "committee", label: <FormattedMessage id="journal.editing-committee"/>},
              {key: "editor_intro", label: <FormattedMessage id="journal.chief-intro"/>},
            ]}>
              {
                navActive === "intro" && journalIntroElement
              }
            </HxKwNavs>
          ) : (
            journalIntroElement
          )
        }
      </div>
    </JournalDefaultLayout>
  );
};

export default JournalIntroduction;
